<template>
  <div class="app-main-container">
    <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear" />
    <div v-if="meta.indexOf('ProjectAdd') > -1" class="doumee-table-buttons">
      <el-button v-preventReClick type="primary" @click="toProjectdAdd">新增</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table doumee-element-tableb"
    >
      <el-table-column align="center" label="项目名称" prop="projectName" min-width="140" show-overflow-tooltip />
      <el-table-column align="center" label="售卖方式" width="100">
        <template slot-scope="scope">
          {{
            scope.row.type === "0"
              ? "场地"
              : scope.row.type === "1"
                ? "门票"
                : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="场次时长" width="100">
        <template slot-scope="scope">
          {{
            scope.row.durationSessions
              ? scope.row.durationSessions + "分钟"
              : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="起订场次" prop="address" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.sessionBegin || "-" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="营业时间" prop="openTime" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.openTimeStart }}-{{ scope.row.openTimeEnd }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="项目图片" width="100">
        <template slot-scope="scope">
          <el-image
            fit="contain"
            :src="scope.row.showProjectPictures"
            :preview-src-list="[scope.row.showProjectPictures]"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="项目状态" prop="openTime" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.status == '1' ? '启用' : '禁用' }}
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="单次同行人员限额" min-width="130">
        <template slot-scope="scope">
          {{ scope.row.peerNum || "-" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="支持全场" prop="openTime" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.isFull == "1" ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="场次默认价格" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.defaultPrice || "-" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="createTime" min-width="160" />
      <el-table-column align="center" label="排序码" prop="sort" min-width="80" />
      <el-table-column align="center" label="状态" fixed="right" width="80">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="'1'"
            :inactive-value="'0'"
            :disabled="meta.indexOf('ProjectStatus') == -1"
            @change="editStatus(scope.row.id, scope.row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="120" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="meta.indexOf('ProjectEdit') > -1"
              v-preventReClick
              type="text"
              @click="toEdit(scope.row.id)"
            >编辑</el-button>
            <!-- <el-button v-if="meta.indexOf('ProjectStatus') > -1" v-preventReClick type="text" @click="editStatus(scope.row.id,scope.row.status)">{{ scope.row.status == '1' ? '禁用' : '启用' }}</el-button> -->
            <el-button
              v-if="meta.indexOf('ProjectDel') > -1"
              v-preventReClick
              type="text"
              class="secondColor"
              @click="toDelete(scope.row.id)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations :total="total" :page="pagination.page" @current-change="getList" @SizeChange="handleSizeChange" />
  </div>
</template>

<script>
import { deleteProject, getProjectList, setProjectStatus } from '@/api'
import { parseTime } from '@/utils/index'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'ProjectList',
  components: {
    QueryForm
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [
          {
            filed: 'name',
            type: 'input',
            label: '项目名称',
            placeholder: '请输入项目名称',
            clearable: true
          },
          {
            filed: 'checkedStatus',
            type: 'select',
            label: '项目状态',
            placeholder: '选择项目状态',
            clearable: true,
            options: [
              { value: '1', label: '启用' },
              { value: '0', label: '禁用' }
            ]
          }],
        online: true
      },
      list: [],
      total: 0,
      listLoading: true,
      pagination: {
        page: 1,
        rows: 10,
        firstQueryTime: ''
      },
      filters: {},
      meta: []
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  activated() {
    if (this.$route.query.renovate) {
      this.getList(1)
    }
  },
  methods: {
    // 新增项目
    toProjectdAdd() {
      this.$router.push({ name: 'ProjectAdd' })
    },
    // 编辑
    toEdit(id) {
      console.log(id)
      this.$router.push({ name: 'ProjectAdd', query: { id: id }})
    },
    // 获取项目列表
    getList(page) {
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      getProjectList({
        pagination,
        param: {
          venueId: filters.id ? filters.id : sessionStorage.getItem('venueId'),
          projectName: filters.name,
          status: filters.checkedStatus
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 启用或禁用
    editStatus(id, status) {
      this.listLoading = true
      setProjectStatus({
        param: {
          id: id,
          status: status
        }
      }).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          const str = status === '1' ? '启用成功' : '禁用成功'
          this.$message.success(str)
        }
        this.getList()
      }).catch(err => {
        this.listLoading = false
        console.log(err)
      })
    },
    // 删除
    toDelete(id) {
      const that = this
      this.$confirm('此操作将删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.listLoading = true
          deleteProject({ param: { id }})
            .then(res => {
              this.listLoading = false
              if (res.errorCode !== '000000') return
              that.$message.success('删除成功')
              that.getList()
            }).catch(err => {
              this.listLoading = false
              console.log(err)
            })
        })
        .catch(() => {
          // this.$message.info('已取消删除')
        })
    },
    // 清空
    clear() {
      this.filters = {}
      this.getList(1)
    },
    handleSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    }
  }
}
</script>
